// 全局字体
$globalFont: cursive;
$globalBgc: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);

// 主内容区域
$mainAreaWidth: 90vw;
$mainAreaHeight: 90vh;
$main-border-left-right: 2vw;
$main-border-top-bot: 2vh;
$main-border-radius: 2vw;
$main-border-color: rgb(5, 6, 45);
$mainBgc: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
                bisque 40%, rgb(255, 185, 160) 78%);

// 移动区域
$moveAreaWidth: 80vw;
$moveAreaHeight: 64vh;
$moveBgc: rgba(255, 255, 255, 0.074);
$move-box-shadow-color: rgba(255, 255, 255, 0.8);

/*
80vw / 2vw = 40
64vh / 2vh = 32
40*32=12800
一共有12800个格子
*/

// 蛇
// 宽高最好相等为一个正方形
$snakeWidth: var(--snake-size, 2vw);
$snakeHeight: var(--snake-size, 2vh);

// 食物和蛇的大小要一样
// 食物
$foodWidth: $snakeWidth;
$foodHeight: $snakeHeight;

// 移动设备宽度短点
$mobileWidth: 768px;

#snakes-container {
        //移动端字体大小
        --mobileFontSize: 16px;
        //pc端字体大小
        --pcFontSize: 20px;

}

@media screen and (width<=$mobileWidth) {
        #snakes-container {
                font-size: var(--mobileFontSize);
                --snake-size: var(--mobileFontSize);
        }
}

@media screen and (width>$mobileWidth) {
        #snakes-container {
                font-size: var(--pcFontSize);
                --snake-size: var(--pcFontSize);
        }
}